<template>
  <div class="main">
    <el-table
      :data="competitionRecord"
      :row-class-name="tableRowClassName">
      <el-table-column
        prop="crtime"
        label="比赛开始时间"
        width="200">
      </el-table-column>
      <el-table-column
        prop="htn"
        label="主队"
        width="120">
      </el-table-column>
      <el-table-column
        prop="tno"
        label="客队"
        width="120">
      </el-table-column>
      <el-table-column
        prop="lbano"
        label="直播管理员"
        width="150">
      </el-table-column>
      <el-table-column
        prop="rcetime"
        label="比赛结束时间"
        width="150">
      </el-table-column>
      <el-table-column
        prop="rcplace"
        label="比赛地点"
        width="125">
      </el-table-column>
      <el-table-column
        prop="rcw"
        label="比赛天气"
        width="130">
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageInfo.pageSize"
        layout="prev, pager, next, jumper"
        :total="pageInfo.itemCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import api from "../../../../axios/api"

  export default {
    name: "index",
    components:{

    },
    data(){
      return {
        competitionRecord:[],
        lbaname:"",
        currentPage: 1,
        pageInfo:{}
      }
    },
    methods: {
      dateformat:function(list){
        var datalist = list;
        for(var i = 0;i< list.length;i++){
         var format =  new Date(list[i].crtime);
         var enFormat = new Date(list[i].rcetime);
         var oneYue = ((format.getMonth()+1) < 10) ? "0" + (format.getMonth()+1) : (format.getMonth()+1);
         var oneDay = format.getDate() < 10 ? "0" + format.getDate() : format.getDate();
         var oneHours = format.getHours() < 10 ? "0" + format.getHours() : format.getHours();
         var oneFen = format.getMinutes() < 10 ? "0" + format.getMinutes() : format.getMinutes();
         var twoYue = ((enFormat.getMonth()+1) < 10) ? "0" + (enFormat.getMonth()+1) : (enFormat.getMonth()+1);
         var twoDay = enFormat.getDate() < 10 ? "0" + enFormat.getDate() : enFormat.getDate();
         var twoHours = enFormat.getHours() < 10 ? "0" + enFormat.getHours() : enFormat.getHours();
         var twoFen = enFormat.getMinutes() < 10 ? "0" + enFormat.getMinutes() : enFormat.getMinutes();
         datalist[i].crtime = format.getFullYear() + "-" + oneYue + "-" + oneDay + " " + oneHours + ":" + oneFen;
         datalist[i].rcetime = enFormat.getFullYear() + "-" + twoYue + "-" + twoDay + " " + twoHours + ":" + twoFen;
         this.setLbanoFromAxios(list[i].lbano,i)

        }
        return datalist;
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
        this.setDataFromAxios(val);
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex % 2 == 0) {
          return 'warning-row';
        } else {
          return '';
        }
        return '';
      }, setLbanoFromAxios:function(lbano,i){
        /* 微服务后完善将比赛类型id拿去查询具体的比赛类型名称 */
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios("/liveAdmin/getAdmin/"+lbano,null,"get")
          .then(res=>{
           this.competitionRecord[i].lbano= res.t.lbaname
          });
        },
      setDataFromAxios: function (currPage) {
        if(currPage!=null){
          this.currentPage = currPage;
        }
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios("/liveAdmin/getCompetitionRecordByPage?currPage="+this.currentPage+"&pageSize=3", null, "get")
          .then(res => {
            console.log(res)
            this.competitionRecord = this.dateformat(res.tList);
            this.pageInfo;
          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      }
    },
    created:function () {
      this.setDataFromAxios();//1.创建页面的时候 调用自定义的数据请求方法  而数据请求方法把得到数据赋值给了当前页面的变量
    }
  }
</script>

<style scoped lang="stylus">
  .main
    width 1000px
    margin 0 auto
  /deep/ .warning-row  /*不写deep渲染出错*/
    background-color oldlace
</style>
